<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05 节点的操作方法</title>
</head>

<body>
    <div class="box">
        <p>我是段落一</p>
    </div>

    <ul id="myList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        // /* 01.document.createElement() (最常用)  通过制定名称创建一个元素 */

        // var div = document.createElement('div');
        // var p = document.createElement('p');
        // console.log('div:', div);
        // console.log('p:', p);

        // var text = document.createTextNode('创建文本节点');
        // console.log('text:', text, text.nodeType);

        // var box = document.getElementById('box');
        // var p = document.createElement('p');
        // var text = document.createTextNode('我是段落二');
        // p.appendChild(text);
        // box.appendChild(p);

        /* 04. 父节点.insertBefore(插入的新节点，源节点)  方法可在已有的子节点前插入一个新的子节点 */

        function fn() {
            var list = document.getElementById('myList');
            var li = document.getElementsByTagName('li');

            var newLi = document.createElement('li');
            var text = document.createTextNode('0');
            newLi.appendChild(text);
            list.insertBefore(newLi, li[0]);
        }

        /* 5. element.replaceChild(新节点， 老节点)  方法可将某个子节点替换为另一个 */

        function fn() {
            var textNode = document.createTextNode('你谁的很安详');
            var item = document.getElementById('myList').children[0];
            item.replaceChild(textNode, item.childNodes[0]);
        }
    </script>
</body>

</html>